<style lang=less>
	@import '../../../assets/public.less';
	@import '../security.less';

</style>
<template>
	<div class="back_card_main">
		<el-form :model="getData" :label-position="labelPosition" status-icon :rules="rules2" ref="getData" label-width="100px" class="demo-ruleForm">
			<el-form-item :label='$t("bankcard.list[0]")' prop="name"><!-- 姓名 -->
				<el-input type="text" v-model="getData.name" auto-complete="off" :disabled="true">
				</el-input>
			</el-form-item>
			<el-form-item :label='$t("bankcard.list[1]")' prop="bank"><!-- 开户银行 -->
				<el-input type="text" v-model="getData.bank" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item :label='$t("bankcard.list[2]")' prop="branch"><!-- 开户支行 -->
				<el-input type="text" v-model="getData.branch" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item :label='$t("bankcard.list[3]")' prop="bank_car"><!-- 银行卡号 -->
				<el-input v-model.text="getData.bank_car"></el-input>
			</el-form-item>
			<el-form-item :label='$t("bankcard.list[4]")' prop="tpwd"><!-- 资金密码 -->
				<el-input type="password" v-model="getData.tpwd" auto-complete="off"></el-input>
			</el-form-item>
		</el-form>

		<div class="el-message-box__btns">
			<button type="button" class="el-button el-button--default el-button--small el-button--primary " @click="submitForm()">
				<span>{{$t("bankcard.list[5]")}}</span><!-- 姓名 -->
			</button>
		</div>
	</div>
</template>
<script>
	export default {

		data() {
			var _this = this;
			var name = (rule, value, callback) => {
				if(!value) {
					return callback(new Error(this.$t("bankcard.nametips")));//姓名不能为空
				} else {
					callback();
				}
			};
			var bank = (rule, value, callback) => {
				if(!value) {
					callback(new Error(this.$t("bankcard.bank")));//开户行不能为空
				} else {
					callback();
				}
			};
			var branch = (rule, value, callback) => {
				if(!value) {
					callback(new Error(this.$t("bankcard.branch")));//开户支行不能为空
				} else {
					callback();
				}
			};
			var bank_car = (rule, value, callback) => {
				if(!_this.$public.bank_car(value)) {
					callback(new Error(this.$t("bankcard.bankcard")));//银行卡号格式有误
				} else {
					callback();
				}
			};
			var tpwd = (rule, value, callback) => {
				if(!_this.$public.pwd(value)) {
					callback(new Error(this.$t("bankcard.tpwd")));//资金密码格式有误
				} else {
					callback();
				}
			};
			return {
				labelPosition: 'top',
				getData: {
					act: 'add', //添加还是编辑
					id: '',
					type: '', //类型
					name: '111', //姓名
					bank: '', //开户银行
					branch: '', //开户支行
					bank_car: '', //银行卡号
					tpwd: '' //资金密码
				},
				rules2: {
					name: [{
						validator: name,
						trigger: 'blur'
					}],
					bank: [{
						validator: bank,
						trigger: 'blur'
					}],
					branch: [{
						validator: branch,
						trigger: 'blur'
					}],
					bank_car: [{
						validator: bank_car,
						trigger: 'blur'
					}],
					tpwd: [{
						validator: tpwd,
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			submitForm() {

				var _this = this;
				//				_this.$refs[_this.getData].resetFields();
				if(!_this.getData.name) {
					_this.$public.msg(_this.$t("bankcard.submitForm[0]"), 'warning', _this);//姓名不能为空
					return false;
				} else if(!_this.getData.bank) {
					_this.$public.msg(_this.$t("bankcard.submitForm[1]"), 'warning', _this);//开户行不能为空
					return false;

				} else if(!_this.getData.branch) {
					_this.$public.msg(_this.$t("bankcard.submitForm[2]"), 'warning', _this);//开户支行不能为空
					return false;

				} else if(!_this.$public.bank_car(_this.getData.bank_car)) {
					_this.$public.msg(_this.$t("bankcard.submitForm[3]"), 'warning', _this);//银行卡号格式有误
					return false;
				} else if(!_this.$public.pwd(_this.getData.tpwd)) {
					_this.$public.msg(_this.$t("bankcard.submitForm[4]"), 'warning', _this);//资金密码格式有误
					return false;
				}
				//请求接口
				_this.$http.post(_this.$http.pay_add, _this.getData).then(function(response) {
					if(response.data.status == "200") {
						_this.$public.msg(response.data.msg, 'success', _this);

						_this.$public.go('/security?flat=ok',10,_this); 
						

					} else {
						_this.$public.msg(response.data.msg, 'warning', _this);
					}
				}).catch(function(error) {});

				//请求ajax发送数据
			},
			getEdit() {
				var _this = this;
				_this.$http.post(_this.$http.pay_edit, {
					id: _this.getData.id,
					type: _this.getData.type
				}).then(function(response) {
					if(response.data.status == "200") {					
						_this.getData.name = response.data.data[0].name;
						_this.getData.bank = response.data.data[0].bank;
						_this.getData.branch = response.data.data[0].branch;
						_this.getData.bank_car = response.data.data[0].bank_car;
					} else {
						_this.$public.msg(response.data.msg, 'warning', _this);
					}
				}).catch(function(error) {});
			},

			init() {
				var _this = this;

				_this.getData.type = _this.$route.query.type //类型
				_this.getData.id = _this.$route.query.id //类型		
				if(_this.$route.query.id == undefined) {
					_this.getData.name = sessionStorage.name;					
					_this.getData.act = 'add';
				} else {
					_this.getData.act = 'edit';
					_this.getEdit();
				}
			}
		},
		// 路由发生变化时
		beforeRouteLeave(to, from, next) {
			var _this = this;
			_this.getData = {
				id: '',
				type: '', //类型
				bank: '', //开户银行
				branch: '', //开户支行
				bank_car: '', //银行卡号
				tpwd: '' //资金密码
			};
			next()
		},

		created: function() {
			var _this = this;
			_this.init();
		},
	}
</script>

<style scoped="scoped">

</style>